<!doctype html>
<html>
    <head>
        <meta content='width=device-width, initial-scale=1.0' name='viewport'>
        <title>{% block title %}{% endblock %} - Dessert House</title>
        <link href="/static/css/bootstrap.css" rel="stylesheet" />
        <link href="/static/css/bootstrap-responsive.css" rel="stylesheet" />
        <link href="/static/css/style.css" rel="stylesheet" />
        {% block head_css %}{% endblock %}
        <script src="/static/js/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script src="/static/js/bootstrap.min.js" type="text/javascript"></script>
        {% block head_script %}{% endblock %}
    </head>
    <body>
        <div id="header" class="container">
            <div class="navbar">
                <div class="navbar-inner">
                    <div class="container" style="width: auto;">
                        <a data-toggle="collapse" href="#" data-target=".nav-collapse" class="btn btn-navbar">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </a>
                        <a href="/" class="brand">Dessert House</a>
                        <div class="nav-collapse">
                            <ul class="nav">
                                <li class="active">
                                    <a href="/"><i class="icon-home"></i> Home</a>
                                </li>
                                <li>
                                    <a href="/shop"><i class="icon-gift"></i> Browse</a>
                                </li>
                                {% if user.is_authenticated %}
                                <li>
                                    <a href="/account"><i class="icon-user"></i> My Account</a>
                                </li>
                                <li>
                                    <a href="/shop/cart"><i class="icon-shopping-cart"></i> Cart</a>
                                </li>
                                {% endif %}
                            </ul>
                            <ul class="nav pull-right">
                                {% if user.is_authenticated %}
                                <li>
                                    <a>Hello, {{ user.username }}!</a>
                                </li>
                                <li>
                                    <a href="/signout">Sign out</a>
                                </li>
                                {% else %}
                                <li class="dropdown" id="signin-menu">
                                    <a id="signin-dropdown" data-toggle="dropdown" href="#signin-menu" class="dropdown-toggle">
                                        Sign in
                                        <b class="caret"></b>
                                    </a>
                                    <div class="dropdown-menu">
                                        <form action="/signin" method="post">
                                            <label>Username</label>
                                            <input type="text" placeholder="Your name" name="username" value="" />
                                            <label>Password</label>
                                            <input type="password" placeholder="Sh...keep secret" name="password" value="" />
                                            <label class="checkbox">
                                                <input type="checkbox" name="remember" value="" /> Remember?
                                            </label>
                                            <button type="submit" class="btn">Sign in</button>
                                            or
                                            <a href="/register">Not a member yet?</a>
                                        </form>
                                    </div>
                                </li>
                                <li>
                                    <a href="/register">Register</a>
                                </li>
                                <script type="text/javascript">
                                    $('#signin-menu').find('form').click(function(e) {
                                        e.stopPropagation();
                                    });
                                </script>
                                {% endif %}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="main" class="container">
        {% block main_content %}{% endblock %}
        </div>
        <div id="footer" class="container">
            <div class="row">
                <div class="span2">
                    <h3>About</h3>
                    <ul>
                        <li>
                            <a href="#">Introduction</a>
                        </li>
                        <li>
                            <a href="#">History</a>
                        </li>
                        <li>
                            <a href="#">Help</a>
                        </li>
                    </ul>
                </div>
            </div>
            <p>&copy;2012 Dessert House</p>
        </div>
    </body>
</html>
